<template>
  <AppPage :show-footer="true">
    <div flex-1>
      <div flex class="screen">
        <n-card rounded-10 class="box1 fff">
          <div class="echarts-box">
            <div id="myEcharts" :style="{ width: '100%', height: '300px' }"></div>
          </div>
        </n-card>
      </div>
      <!-- 表单查询 -->
      <n-card class=" flex-shrink-0  mb-10 mt-10 cursor-pointer" rounded-10 hover:card-shadow size="small">
        <n-form ref="formRef" :model="model" :rules="rules" :size="size" label-placement="left">

          <n-grid :cols="24" :x-gap="24">

            <n-form-item-gi :span="5" label="就诊状态" path="state_registration">
              <n-select v-model:value="model.state_registration" placeholder="请选择 就诊状态" :options="generalOptions" />
            </n-form-item-gi>

            <n-form-item-gi :span="6" label="就诊时间" path="time_registration">
              <n-date-picker v-model:value="model.time_registration" type="date" />
            </n-form-item-gi>

            <n-form-item-gi :span="6" label="至" path="time_registration_last">
              <n-date-picker v-model:value="model.time_registration_last" type="date" />
            </n-form-item-gi>

            <n-form-item-gi :span="5" label="患者姓名" path="name_patient">
              <n-input v-model:value="model.name_patient" placeholder="请输入 患者姓名" />
            </n-form-item-gi>

            <n-gi :span="2">
              <!-- <div style="display: flex; justify-content: flex-end"> -->
              <n-button round type="primary" @click="getData">
                查找
              </n-button>
              <!-- </div> -->
            </n-gi>

          </n-grid>
        </n-form>
      </n-card>

      <!-- 表格列表 -->
      <n-card class=" flex-shrink-0  mb-10 mt-10 cursor-pointer" rounded-10 hover:card-shadow size="small">
        <n-data-table :columns="columns" :data="state.data" :pagination="pagination" :bordered="false" />
        <!-- :render-cell="renderCell" -->
      </n-card>
    </div>
  </AppPage>
</template>

<script setup>
import { useUserStore } from '@/store'
import api from './api'
import { NButton, useMessage, NText } from "naive-ui";
import { reactive } from 'vue';
import { util } from "./util"
import * as echarts from "echarts";

// const echart = echarts;
let echart = echarts
const router = useRouter()
const formRef = ref(null);
const size = ref("medium");
const model = ref({
  state_registration: null,//就诊状态
  time_registration: null,//就诊时间
  time_registration_last: null,// 结束时间
  name_patient: null,//患者姓名
})
// 图标数据
const datedate = ref(null)
datedate.value = util()
// 图标时间对象数据
const timedata = ref(null)
timedata.value = util()
console.log(timedata.value, "timedata.value");
const generalOptions = ["待就诊", "已就诊", "全部",].map(
  (v) => ({
    label: v,
    value: v
  })
)


const rules = {
  name_patient: {
    trigger: ["blur", "input"],
    message: "请输入 患者姓名"
  },
  state_registration: {
    trigger: ["blur", "change"],
    message: "请选择 就诊状态"
  },
  time_registration: {
    type: "number",
    trigger: ["blur", "change"],
    message: "请输入 起始时间"
  },
  time_registration_last: {
    type: "number",
    trigger: ["blur", "change"],
    message: "请输入 结束时间"
  }
}


const createColumns = ({
  sendMail
}) => {
  return [
    {
      title: "患者姓名",
      key: `patient.name_patient`
    },
    {
      title: "挂号ID",
      key: "id_registration"
    },
    {
      title: "预约时间",
      key: "time_registration"
    },
    {
      title: "患者身份证号",
      key: `patient.identity_patient`
    },
    {
      title: "电话",
      key: `patient.phone_patient`
    },
    {
      title: "年龄",
      key: `patient.age_patient`
    },
    {
      title: "状态",
      key: `state_registration`,
      render (row) {
        if (row.state_registration == "1") {
          return h(
            NText, { depth: 1 },
            { default: () => '已就诊' }
          )
        } else {
          return h(
            NText, { depth: 1 },
            { default: () => '未就诊' }
          )
        }
      }
    },
    {
      title: "操作",
      key: "actions",
      render (row) {
        return h(
          NButton,
          {
            size: "small",
            onClick: () => sendMail(row)
          },
          { default: () => "查看" }
        );
      }
    }
  ];
};
// 列表对象展示
const columns = createColumns({
  sendMail (rowData) {
    // message.info("send mail to " + rowData.name);
    router.push({ path: "/diagnostic/detail", query: { id: rowData.id_registration } })
  }
})
const message = useMessage();
// 分页
const pagination = reactive({
  page: 2,
  pageSize: 10,
  showSizePicker: true,
  pageSizes: [3, 5, 7],
  onChange: (page) => {
    paginationReactive.page = page;
  },
  onUpdatePageSize: (pageSize) => {
    paginationReactive.pageSize = pageSize;
    paginationReactive.page = 1;
  }
});
// 列表数据
const state = reactive({
  data: []
});
// 获取数据
async function getData () {
  const { data } = await api.findAllByOptionRegistration({ data: model.value })
  console.log(data, "data");
  state.data = data
}

// 获取当月，每天的挂号数
async function findCountByDateRegistration () {
  const { data } = await api.findCountByDateRegistration()
  console.log(data);
  const map = new Map()
  for (let i = 0; i < data.length; i++) {
    map.set(data[i].date, data[i].total)
  }
  console.log(map);
  for (let i = 0; i < datedate.value.length; i++) {
    if (map.get(datedate.value[i])) {
      datedate.value[i] = map.get(datedate.value[i])
    } else {
      datedate.value[i] = 0
    }
  }
  // 绘制表格
  initChart();
}

// 配置Echarts
async function initChart () {
  let chart = echart.init(document.getElementById("myEcharts"), "dark");
  // 把配置和数据放这里
  chart.setOption({
    xAxis: {
      type: "category",
      data: timedata.value
    },
    tooltip: {
      trigger: "axis"
    },
    yAxis: {
      type: "value"
    },
    series: [
      {
        data: datedate.value,
        type: "line",
        smooth: true
      }
    ]
  });
  window.addEventListener("resize", () => {  //根据屏幕进行实时绘制
    chart.resize();
  });
}

//初始挂载
onMounted(() => {
  getData()
  findCountByDateRegistration()
  // 初始化echarts

})
onUnmounted(() => {
  // 销毁echarts
  echart.dispose;
});
</script>

<style lang="scss" scoped>
.back {
  display: flex;
  justify-content: space-between;
}
.screen {
  justify-content: space-between;
}
.box1 {
  background: linear-gradient(90deg, rgba(126, 167, 233, 1) 0, rgba(126, 231, 233, 1) 100%);
}
.box2 {
  background: linear-gradient(90deg, rgba(70, 181, 144, 1) 0, rgba(152, 245, 171, 1) 100%);
}
.box3 {
  background: linear-gradient(90deg, rgba(233, 126, 126, 1) 0, rgba(233, 126, 171, 1) 100%);
}
.fff {
  color: #fff;
}
.dia-icon {
  margin-top: 50px;
  margin-right: 35px;
  height: 60px;
  width: 50px;
}

.table-list {
  margin-top: 15px;
}
</style>